<script setup>
import { ref, onMounted, nextTick } from 'vue'
import userStore from '@/stores/LoginUser.js'
import Breadcrumb from "@/stores/Breadcrumb.js";
// 导入图标组件
import { HomeFilled, Setting, User, UserFilled, Menu } from '@element-plus/icons-vue'

const title = import.meta.env.VITE_APP_TITLE;
let menuList = ref([]);
const menuRef = ref(null); // 菜单实例引用

// 图标映射表
const iconMap = {
  'Setting': Setting,
  'User': User,
  'UserFilled': UserFilled,
  'Menu': Menu
};

// 获取图标组件
const getIcon = (iconName) => {
  return iconMap[iconName] || Setting;
};

// 页面挂载逻辑
onMounted(async () => {
  const userModel = userStore().userModel;
  if (userModel && userModel.role && userModel.role.menuList) {
    menuList.value = userModel.role.menuList;
  }
  // 等待DOM渲染后关闭所有子菜单
  await nextTick();
  if (menuRef.value) {
    menuRef.value.closeAll();
  }
});

const handleOpen = () => {};
const handleClose = () => {};
</script>

<template>
  <el-row class="tac left-menu-main">
    <el-col :span="24">
      <!-- 标题栏：标签闭合正常 -->
      <div class="left-menu-title">
        <el-text class="mx-1" type="primary" size="large">{{ title }}</el-text>
      </div>

      <!-- 菜单组件：ref绑定正常，标签闭合完整 -->
      <el-menu
          ref="menuRef"
          default-active="/index"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          :default-openeds="[]"
      >
        <!-- 首页菜单：关键修正 <el-icon> 闭合方式 -->
        <el-menu-item index="/index">
          <el-icon> <!-- 双标签，内部嵌套图标组件 -->
            <HomeFilled /> <!-- 图标组件自闭合，符合规范 -->
          </el-icon>
          <span>首页</span>
        </el-menu-item>

        <!-- 父菜单循环：key和index正常 -->
        <template v-for="menu in menuList" :key="menu.id">
          <el-sub-menu :index="menu.id.toString()">
            <!-- 父菜单标题插槽：标签闭合完整 -->
            <template #title>
              <el-icon>
                <component :is="getIcon(menu.icon)" /> <!-- component自闭合 -->
              </el-icon>
              <span>{{ menu.permissionName }}</span>
            </template>

            <!-- 子菜单循环：处理childList为空的情况 -->
            <template v-for="child in (menu.childList || [])" :key="child.id">
              <el-menu-item :index="child.permissionUrl">
                <!-- 子菜单图标：闭合规范 -->
                <el-icon>
                  <component :is="getIcon(child.icon)" />
                </el-icon>
                <span>{{ child.permissionName }}</span>

                <!-- 面包屑插槽：关键修正标签嵌套顺序 -->
<!--                <template #title>-->
<!--                  <span @click="Breadcrumb().breadcrumb = {-->
<!--                    one: menu.permissionName,-->
<!--                    two: child.permissionName-->
<!--                  }">-->
<!--                    {{ child.permissionName }}-->
<!--                  </span> &lt;!&ndash; span标签必须完整闭合 &ndash;&gt;-->
<!--                </template>-->
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
      </el-menu>
    </el-col>
  </el-row>
</template>

<style scoped>
.el-menu {
  border-right: 0;
}
.left-menu-title {
  border-bottom: 1px solid var(--el-border-color);
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.el-menu-item.is-active {
  background-color: var(--el-color-primary-light-9) !important;
  color: var(--el-color-primary) !important;
}
</style>